import React from 'react';
import ReactDOM from 'react-dom';

interface Props {

}

class Sum extends React.Component {
  a: React.RefObject<HTMLInputElement>; //传递的参数就是current的类型
  b: React.RefObject<HTMLInputElement>;
  c: React.RefObject<HTMLInputElement>;

  constructor(props: Props) {
    super(props);
    this.a = React.createRef(); //React.createRef()返回一个对象->{current:null}
    this.b = React.createRef(); //{current:null}
    this.c = React.createRef(); //{current:null}
  }

  add = () => {
    let a = this.a.current!.value; //省去了this.refs.a的refs
    let b = this.b.current!.value;
    this.c.current!.value = a + b;
  };

  render() {
    return (
      <>
        <input ref={this.a}/>+
        <input ref={this.b}/>
        <button onClick={this.add}>=</button>
        <input ref={this.c}/>
      </>
    );
  }
}

ReactDOM.render(<Sum/>, document.getElementById('root'))
